.check-container {
	background: #F4F5F9;
	height: 100%;
	.check-header {
		margin-bottom: 15px;
		background: white;
		display: flex;
		padding: 10px 15px;
		border-radius: 4px;
		.select > div{
			margin-top: 2%;
			margin-right: 30px;
			input {
				background: #F3F3F3;
				color: #77808D;
				&::placeholder {
					color: #77808D;
				}
			}
		}
		.statistics {
			display: flex;
			align-items: center;
			margin-left: auto;
			li:first-child {
				.el-button {
					font-size: 10px;
					border-radius: 50%;
					border: 1px solid black;
					display: inline-block;
					width: 15px;
					height: 15px;
					text-align: center;
					padding: 0 0 0 3px;
					margin-left: 5px;
				}
				.el-button:hover {
					color: black;
					background: none;
				}
			}
			li:not(:first-child) {
				text-align: center;
				background: #FFF4DF;
				border-radius: 6px;
				padding: 10px 12px;
				margin-left: 30px;
				position: relative;
				p:nth-of-type(1) {
					color: #FAAD14;
				}
				p {
					font-weight: 600;
				}
				&::before {
					content: '';
					display: block;
					width: 5px;
					height: 12px;
					background: #FAAD14;
					border-radius: 10px;
					position: absolute;
					top: -5px;
					left: 15px;
				}
				&::after {
					content: '';
					display: block;
					width: 5px;
					height: 12px;
					background: #FAAD14;
					border-radius: 10px;
					position: absolute;
					top: -5px;
					right: 15px;
				}
			}
		}
	}
	.check-body {
		position: relative;
		height: calc(100% - 97px);
		background: #FFFFFF;
		box-shadow: 0px -2px 6px 0px rgba(91, 125, 255, 0.08);
		border-radius: 5px;
		border: 1px solid #D9DDE6;
		overflow: auto;
		padding: 15px;
		@media only screen and (max-width: 1480px) {
			.left {
				width: 190px !important;
				z-index: 10;
				left: 10px !important;
				//left: -300px !important;
			}
			.right {
				padding-left: 195px !important;
				.query-cell {
					& > span {
						display: none;
					}
				}
			}
		}
		.left {
			transition: all .3s;
			position: absolute;
			left: 20px;
			top: 10px;
			width: 220px;
			height: calc(100% - 14.8px);
			border-radius: 6px 6px 0 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			.title-search {
				background: #72b22a;
				color: white;
				padding: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.search-box {
					cursor: pointer;
					transition: all .5s;
					flex: .1;
					.el-input__inner{
						border-radius: 18px;
						border: none;
						color: white !important;
						background: rgba(255, 255, 255, 0.3);
						&::placeholder {
							color: white !important;
						}
					}
					.el-input__prefix {
						color: white;
					}
				}
				.search-box.active {
					flex: 1;
				}
			}
			.tip {
				display: flex;
				border-left: 1px solid #DBDEE5;
				border-right: 1px solid #DBDEE5;
				div {
					width: 50%;
					text-align: center;
					padding: 15px 0;
					background: #F5F7FA;
				}
				div:nth-of-type(1) {
					border-right: 1px solid #D7DAE0;
				}
				div:nth-of-type(2) {
					border-left: 1px solid #D7DAE0;
					.el-button {
						font-size: 10px;
						border-radius: 50%;
						border: 1px solid black;
						display: inline-block;
						width: 15px;
						height: 15px;
						text-align: center;
						padding: 0 0 0 3px;
						background: #F5F7FA;
						color: black;
					}
					.el-button:hover {
						color: black;
					}
				}
			}
			.teach-box {
				flex: 1;
				overflow: auto;
				border-left: 1px solid #DBDEE5;
				border-right: 1px solid #DBDEE5;
				.teacher-item {
					display: flex;
					justify-content: space-between;
					line-height: 45px;
					cursor: pointer;
					padding: 0 20px;
					&.teacher-item-active {
						background: #72b22a;
						color: white;
					}
					&::not(.teacher-item-active)hover {
						background: #F5F7FA;
					}
				}
			}
		}
		.right {
			transition: all .3s;
			padding-left: 240px;
			width: 100%;
			height: 100%;
			float: left;
			&-top {
				.el-radio-button__orig-radio:checked+.el-radio-button__inner {
					background: #72b22a;
					border-color: #72b22a;
					box-shadow: -1px 0 0 0 #72b22a;
				}
				overflow: hidden;
				.status-cell {
					float: left;
					display: flex;
					border: 1px solid #DEE4F1;
					border-radius: 4px;
					margin-top: 2px;
					.cell {
						padding: 5px 15px;
						&:not(:last-child) {
							border-right: 1px solid #DEE4F1;
						}
					}
				}
				.teacher-query {
					float: right;
					display: flex;
					margin-left: auto;
					.query-cell  {
						& > span {
							margin-right: 20px;
						}
						&:not(:last-child) {
							margin-right: 25px;
						}
						.el-cascader {
							width: auto;
						}
					}
				}
			}
			.right-content {
				.page {
					margin-top: 30px;
				}
				&-cell {
					border: 1px solid #DEE4F1;
					border-radius: 15px;
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 15px 0;
					margin-top: 15px;
					&-basic {
						flex: .5;
						display: flex;
						align-items: center;
						.lesson-img {
							width: 80px;
							height: 80px;
							img {
								display: block;
								width: 100%;
								height: 100%;
							}
						}
						.lesson-info {
							margin-left: 10px;
							&-courseIndex {
								font-size: 17px;
								font-weight: 800;
								margin-bottom: 10px;
							}
							&-courseName {
								font-size: 14px;
								margin-bottom: 5px;
							}
							&-time {
								font-size: 13px;
								color: #77808D;
							}
						}
					}
					&-name {
						flex: .2;
					}
					&-status {
						.plan-status {
							font-size: 13px;
							margin-bottom: 10px;
							span {
								color: #74C874;
								background: #F2F2F2;
								padding: 3px 10px;
								border-radius: 3px;
								font-size: 13px;
								b {
									margin-right:3px;
								}
							}
						}
						.video-status {
							font-size: 13px;
							span {
								color: #FC514F;
								background: #FFEFEB;
								padding: 3px 10px;
								border-radius: 3px;
								font-size: 13px;
								b {
									margin-right:3px;
								}
							}
						}
					}
					&-score {
						color: #382A74;
						padding: 10px 20px;
						border: 1px solid #382A74;
						border-radius: 6px;
						&:hover {
							border-color: #72b22a;
							color: #72b22a;
						}
					}
					&:hover{
						background: #F5F7FA;
						cursor: pointer;
					}
				}
			}
		}
	}
	.score-body {
		padding: 15px;
		.quality-title, .yet-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			p:nth-of-type(2) {
				flex: .98;
				height: 1px;
				background: black;
			}
		}
		.quality-body{
			margin-bottom: 20px;
			.quality-body-cell {
				span:nth-of-type(1) {
					flex: .25;
				}
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 5px;
			}
			.el-input {
				width: 40px;
				.el-input__inner{
					padding: 0;
					text-align: center;
				}
			}
			.el-radio-group {
				flex: .7;
				display: flex;
				justify-content: space-between;
				label.el-radio {
					flex: 1;
				}
			}
		}
	}
}

.preview {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: white;
	z-index: 99;
	display: flex;
	flex-direction: column;
	.head {
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #72b22a;
		color: white;
		padding: 0 40px;
		div {
			display: flex;
			align-items: center;
			cursor: pointer;
		}
		.el-icon-arrow-left {
			font-size: 30px;
		}
	}
	.body {
		flex: 1;
		display: flex;
		background: #F4F5F9;
		overflow: auto;
		.body-left{
			flex: .17;
			min-width: 200px;
			background: white;
			overflow: auto;
			.header {
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				margin: 30px 0 10px 0;
				text-align: center;
				& > div {
					cursor: pointer;
					flex: 1;
					&.tabActive {
						color: #72b22a;
					}
				}
				& > div:nth-of-type(1) {
					border-right: 1px solid #DCDFE6;
				}
			}
			.content {
				overflow: hidden;
				.content-ul {
					flex: 1 1 auto;
					li {
						box-sizing: border-box;
						padding: 10px;
						&.active {
							background: #F5F7FA;
						}
					}
					.content-cell-wrapper {
						text-align: center;
						.img {
							margin-bottom: 5px;
						}
					}
					&.teach-ul {
						.teach {
							display: none;
						}
					}
					&.video-ul {
						.video {
							display: none;
						}
					}
				}
			}
		}
		.body-right{
			flex: 1;
			box-sizing: border-box;
			padding: 30px 10px 20px 10px;
		}
	}
}
.slide-fade-enter-active {
	transition: all .3s ease;
}
.slide-fade-leave-active {
	transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
	/* .slide-fade-leave-active for below version 2.1.8 */ {
	transform: translateX(50px);
	opacity: 0;
}
